<template>

  <el-drawer v-bind="$attrs" v-on="$listeners">
    <span style="position: absolute; top: 30px; left: 30px; font-size: 20px">患者新增</span>
    <div class="business">
      <div class="business-top">
        <el-button-group>
          <el-button class="filter-item" type="primary">保存</el-button>
          <el-button class="filter-item" type="">签到</el-button>
          <el-button class="filter-item" type="">新增</el-button>
          <el-button class="filter-item" type="">替查</el-button>
          <el-button class="filter-item" type="">照相</el-button>
          <el-button class="filter-item" type="">身份证</el-button>
        </el-button-group>
        <el-button-group style="padding-left: 20px">
          <el-button class="filter-item" type="primary">费用</el-button>
          <el-button class="filter-item" type="">金额</el-button>
          <el-button class="filter-item" type="">折扣</el-button>
          <el-button class="filter-item" type="">自费</el-button>
        </el-button-group>
        <el-button-group style="padding-left: 20px">
          <el-button class="filter-item" type="primary">套餐</el-button>
          <el-button class="filter-item" type="">分组</el-button>
          <el-button class="filter-item" type="">项目</el-button>
          <el-button class="filter-item" type="">单位项目</el-button>
          <el-button class="filter-item" type="">清空</el-button>
        </el-button-group>
        <el-button-group style="padding-left: 20px">
          <el-button class="filter-item" type="primary">会员卡</el-button>
        </el-button-group>
        <el-button-group style="padding-left: 20px">
          <el-button class="filter-item" type="primary">打印条码</el-button>
          <el-button class="filter-item" type="">打印指引单</el-button>
        </el-button-group>
      </div>
      <div class="business-content">
        <div class="business-content-left">
          <el-scrollbar style="height: 100%">
            <div class="left-item">
              <span class="spanLeft">编码</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">身份证</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">出生日期</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">年龄</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">性别</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">电话</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">单位</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">分组</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">部门</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">体检类型</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">体检类别</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">婚姻状况</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">民族</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">学历</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">体检卡号</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">报告类型</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">是否vip</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">住址</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">工号</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">学院</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">专业</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">年级</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">推荐人</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">会员卡号</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">复查</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">免费</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">早餐</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">标签</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">证件类型</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">项目来源</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
            <div class="left-item">
              <span class="spanLeft">备注</span>
              <el-input class="elInput" v-model="input" size="mini"/>
            </div>
          </el-scrollbar>
        </div>
        <div class="business-content-right">
          <span>已选项目<br></span>
          <span>条码列表</span>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import constant from './const.js'

export default {
  name: 'registerCreate',
  components: {constant},
  data() {
    return {}
  },
  methods: {}
}
</script>
<style lang="scss" scoped>

.business {
  margin: 17px 23px;
  position: relative;
  height: 87vh;
  display: grid;
  grid-template-rows: 50px  1fr;
  background-color: #eef1f6;

  .business-top {
    padding: 5px;
    background-color: white;
  }

  .business-content {
    display: grid;
    grid-template-columns: 270px  1fr;
    margin-top: 5px;
    overflow: auto;

    .business-content-left {
      border: 3px solid #eef1f6;
      height: 100%;
      overflow: auto;
      background-color: white;

      .left-item {
        width: 100%;
        margin-top: 5px;
        display: inline-block;

        .spanLeft {
          width: 75px;
          margin-top: 3px;
          display: inline-block;
        }

        .elInput {
          width: 188px;
          float: right;
        }
      }
    }

    .business-content-right {
      margin-left: 5px;
      background-color: white;
    }
  }
}
</style>
